<template>

    <div class="page">
        <!-- 完成时间一周
    完成卧龙控股网页布局
    结构使用html
    样式使用less语法
    列表部分:使用响应式数据模拟数据(结合TS定义数据类型),v-for完成循环渲染
    1、黑色的nav导航
    2、新闻资讯列表
    3、卧龙市场列表
    4、产品中心列表
    5、技术研发列表
    使用组件拆分页面（头部、导航、banner图、列表n个、底部）-->
        <!-- 头部组件 -->
        <TopCom />
        <div class="clear"></div>
        <!-- 导航组件 -->
        <NavCom />
        <!-- banner图 -->
        <img src="../assets/img/2.png" alt="" width="100%">
        <!--新闻资讯  -->
        <NewsCom />
        <!-- 卧龙市场 -->
        <MarketCom />
        <!-- 产品中心 -->
        <ProductCom/>
        <!-- buttom -->
        <img src="../assets/img/buttom.png" alt="" class="picture">
    </div>

</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import TopCom from '@/components/TopCom.vue';
import NavCom from '@/components/NavCom.vue';
import NewsCom from '@/components/NewsCom.vue';
import MarketCom from '@/components/MarketCom.vue';
import ProductCom from '@/components/ProductCom.vue';
</script>
<style lang='less' scoped>
.page {
    width: 1000px;
    margin: 0px auto;
}

.clear {
    clear: both;
}
.picture{
    width: 1000px;
    height: 30px;
}
</style>